<template>
  <div class="home">
    <div class="toper">
      <p>业主列表</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>社区管理</el-breadcrumb-item>
        <el-breadcrumb-item>业务管理</el-breadcrumb-item>
        <el-breadcrumb-item>业务列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <div class="header">
        <el-input placeholder="业主编码" v-model="ownerNum" clearable>
        </el-input>
        <el-input placeholder="业主名称" v-model="ownerName" clearable>
        </el-input>
        <el-select v-model="personType" clearable placeholder="人员类型">
          <el-option
            v-for="item in personT"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input placeholder="房屋位置" v-model="houseAddress" clearable>
        </el-input>
        <el-input placeholder="联系方式" v-model="phone" clearable> </el-input>
        <el-date-picker
          v-model="timeValue"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
        <el-button
          style="background-color: #0bb197"
          type="success"
          icon="el-icon-search"
          @click="search"
          >查询</el-button
        >
        <el-button type="" icon="el-icon-refresh" class="reset" @click="reset"
          >重置</el-button
        >
      </div>
      <div class="body">
        <div class="bodyHeader">
          <p>查询结果列表</p>
          <el-button
            type="success"
            style="background-color: #0bb197"
            @click="addDialog = true"
            >新增</el-button
          >
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column align="center" prop="id" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="ownerNum" label="业主编号">
          </el-table-column>
          <el-table-column align="center" prop="ownerName" label="业主名称">
          </el-table-column>
          <el-table-column align="center" prop="sex" label="性别">
            <template slot-scope="scope">
              <span>{{ scope.row.sex == 0 ? "女" : "男" }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="ownerType" label="人员类型">
            <template slot-scope="scope">
              <span>{{
                scope.row.ownerType == 0
                  ? "租户"
                  : scope.row.ownerType == 1
                  ? "家庭成员"
                  : "业主"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="houseAddress"
            label="所属房屋"
            width="200"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="phone"
            label="联系方式"
            width="130"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="idNumber"
            label="证件号码"
            width="130"
          >
          </el-table-column>
          <el-table-column align="center" prop="checkinTime" label="入驻日期">
            <template slot-scope="scope">
              <span>{{ timeTrans(scope.row.checkinTime, 1) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                style="color: #0bb197"
                type="text"
                @click="handleEdit(scope.row), (editDialog = true)"
                >编辑</el-button
              >
              <el-button
                style="color: #0bb197"
                type="text"
                @click="deleteRow(scope.row.id)"
                >删除</el-button
              >
              <el-button
                style="color: #0bb197"
                type="text"
                @click="houseRow(scope.row.ownerNum), (ownerDialog = true)"
                >房屋情况</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :background="true"
          class="msg-pagination-container"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

        <!-- 新增的弹出框 -->
        <el-dialog title="新增业主" :visible.sync="addDialog">
          <el-form :model="addData">
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="业主编码"
              >
                <el-input
                  placeholder="例如：YZ1111"
                  clearable
                  v-model="addData.ownerNum"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item style="width: 45%" label="业主姓名">
                <el-input
                  placeholder="请输入"
                  clearable
                  v-model="addData.ownerName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="人员类型"
              >
                <el-select
                  v-model="addData.ownerType"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in ownerT"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="width: 45%" label="人员性别">
                <el-select v-model="addData.sex" clearable placeholder="请选择">
                  <el-option
                    v-for="item in sexT"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="所属房屋"
              >
                <el-select
                  v-model="addData.houseNum"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in hAddress"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="width: 45%" label="联系方式">
                <el-input
                  placeholder="请输入"
                  clearable
                  maxlength="11"
                  v-model="addData.phone"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="证件号码"
              >
                <el-input
                  placeholder="请输入"
                  clearable
                  v-model="addData.idNumber"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item style="width: 45%" label="入驻日期">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="addData.checkinTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              type=""
              style="margin-right: 30px"
              class="reset"
              @click="addDialog = false"
              >取 消</el-button
            >
            <el-button type="success" class="btnColor" @click="add"
              >保 存</el-button
            >
          </div>
        </el-dialog>

        <!-- 编辑的弹出框 -->
        <el-dialog title="编辑业主" :visible.sync="editDialog">
          <el-form :model="editData">
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="业主编码"
              >
                <el-input
                  placeholder="请输入"
                  disabled
                  v-model="editData.ownerNum"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item style="width: 45%" label="业主姓名">
                <el-input
                  placeholder="请输入"
                  clearable
                  v-model="editData.ownerName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="人员类型"
              >
                <el-select
                  v-model="editData.ownerType"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in personT"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="width: 45%" label="人员性别">
                <el-select
                  v-model="editData.sex"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in sexT"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="所属房屋"
              >
                <el-input
                  placeholder="请输入"
                  disabled
                  v-model="editData.houseAddress"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item style="width: 45%" label="入驻日期">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="editData.checkinTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </div>
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="证件号码"
              >
                <el-input
                  placeholder="请输入"
                  clearable
                  v-model="editData.idNumber"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item style="width: 45%" label="联系方式">
                <el-input
                  placeholder="请输入"
                  clearable
                  v-model="editData.phone"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              type=""
              style="margin-right: 30px"
              class="reset"
              @click="editDialog = false"
              >取 消</el-button
            >
            <el-button type="success" class="btnColor" @click="edit"
              >保 存</el-button
            >
          </div>
        </el-dialog>

        <!-- 房屋情况的弹出框 -->
        <el-dialog title="绑定房屋情况" :visible.sync="ownerDialog">
          <el-table align="center" :data="houseData" stripe style="width: 100%">
            <el-table-column align="center" prop="id" label="序号">
            </el-table-column>
            <el-table-column align="center" prop="houseNum" label="房屋编码">
            </el-table-column>
            <el-table-column align="center" prop="houseName" label="房屋名称">
            </el-table-column>
            <el-table-column align="center" prop="houseType" label="房屋类型">
              <template slot-scope="scope">
                <span>{{ scope.row.houseType == 0 ? "住宅" : "出租" }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="houseArea" label="面积(m²)">
            </el-table-column>
            <el-table-column
              align="center"
              prop="houseAddress"
              label="房屋位置"
            >
            </el-table-column>
          </el-table>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import time from "../utils/time";
export default {
  mixins: [time],
  data() {
    return {
      page: 1,
      count: 5,
      total: 1,
      addDialog: false,
      editDialog: false,
      ownerDialog: false,
      ownerNum: "",
      ownerName: "",
      houseAddress: "",
      phone: "",
      timeValue: [],
      tableData: [],
      addData: {
        checkinTime: "",
        houseNum: "",
        idNumber: "",
        ownerName: "",
        ownerNum: "",
        ownerType: 0,
        phone: "",
        sex: 0,
      },
      editData: {},
      ownerData: {},
      houseData: {},
      sex: "",
      sexT: [
        {
          value: 0,
          label: "女",
        },
        {
          value: 1,
          label: "男",
        },
      ],
      personType: "",
      personT: [
        {
          value: 0,
          label: "租户",
        },
        {
          value: 1,
          label: "家庭成员",
        },
        {
          value: 2,
          label: "业主",
        },
      ],

      // 添加返回地址
      hAddress: [],
      //编辑
      ownerType: "",
      ownerT: [
        {
          value: 0,
          label: "租户",
        },
        {
          value: 1,
          label: "家庭成员",
        },
        {
          value: 2,
          label: "业主",
        },
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page = 1;
      this.count = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    getData: function () {
      this.$axios({
        url: "/smart/owner/list",
        method: "get",
        params: {
          pageNum: this.page,
          pageSize: this.count,
          houseAddress: this.houseAddress,
          ownerName: this.ownerName,
          ownerNum: this.ownerNum,
          ownerType: this.personType,
          phone: this.phone,
          startTime: this.timeValue[0],
          endTime: this.timeValue[1],
        },
      }).then(({ data }) => {
        console.log(data);
        if (data.code == "00000") {
          this.tableData = data.data.list;
          this.total = data.data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    reset: function () {
      this.ownerName = "";
      this.ownerNum = "";
      this.personType = "";
      this.houseAddress = "";
      this.phone = "";
      this.timeValue = [];
      this.getData();
    },
    search: function () {
      this.getData();
    },
    // 渲染房屋位置
    getHouseNames() {
      this.$axios({
        url: "/smart/house/list",
        methods: "get",
        params: {
          pageNum: 1,
          pageSize: 1000000,
          houseNum: "",
          houseName: "",
          houseType: "",
          houseAddress: "",
          houseOwner: "",
          state: "",
        },
      }).then(({ data }) => {
        data.data.list.forEach((v, i) => {
          let item = {
            value: v.houseNum,
            label: v.houseAddress,
          };
          this.hAddress.push(item);
        });
      });
    },
    add: function () {
      this.$axios({
        url: "/smart/owner/add",
        method: "post",
        params: this.addData,
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.$message.success("添加成功");
          this.addDialog = false;
          this.getData();
          this.addData = {};
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    deleteRow(row) {
      this.$axios({
        url: "/smart/owner/del/" + row,
        method: "DELETE",
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.$message.success("删除成功");
          this.getData();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    handleEdit(row) {
      let editData = { ...row };
      editData.checkinTime = this.timeTrans(editData.checkinTime, 1);
      this.editData = editData;
      if (editData.ownerType == 0) {
        this.ownerType = 0;
      } else if (editData.ownerType == 1) {
        this.ownerType = 1;
      } else {
        this.ownerType = 2;
      }
      console.log(editData);
    },
    edit: function () {
      this.$axios({
        url: "/smart/owner/edit",
        method: "put",
        data: this.editData,
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.$message.success("修改成功");
          this.editDialog = false;
          this.getData();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    // 房屋情况
    houseRow(row) {
      this.$axios({
        url: "/smart/owner/queryByOwnerNum/" + row,
        method: "get",
      }).then(({ data }) => {
        if (data.code == "00000") {
          data.data.forEach((v, i) => {
            v.id = i + 1;
          });
          this.houseData = data.data;
        } else {
          this.$message.error("房屋数据加载失败！");
        }
      });
    },
  },
  mounted: function () {
    this.getData();
    this.getHouseNames();
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 95%;
  margin: 20px 20px 0px 20px;
  .toper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      margin-bottom: 20px;
      color: #333333;
    }
  }
  .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .header {
      width: 100%;
      height: 80px;
      background-color: #ffffff;
      border-radius: 8px;
      margin-bottom: 25px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el-input,
      .el-select,
      .el-date-picker {
        width: 200px;
        margin: 5px;
      }
      .el-button {
        margin: 5px;
      }
      .el-dialog {
        width: 35%;
      }
    }
    .btnColor {
      background-color: #0bb197;
    }
    .dialog-footer {
      display: flex;
      justify-content: center;
    }
    .addBox {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      .el-select {
        width: 100%;
      }
    }
    .reset {
      background-color: white;
      color: #c0c4cc;
      border: 1px solid #c0c4cc;
    }
    .reset:hover {
      color: #0bb197;
    }
    .body {
      width: 100%;
      background-color: #ffffff;
      border-radius: 8px;
      .bodyHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          color: #3c4145;
          margin: 20px 0px 0px 20px;
          font-weight: bold;
        }
        .el-button {
          margin: 20px 20px 0px 20px;
        }
      }
      .el-pagination {
        margin: 20px 10px 50px 0px;
        text-align: right;
      }
    }
  }
}
</style>
<style>
.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #0bb197;
  color: #fff;
}
</style>
